<template>
	<view class="personal-center">
		<!-- 个人头像区域 -->
		<view class="avatar-container">
			<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
		</view>

		<!-- 个人信息区域 -->
		<view class="info-container">
			<view class="info-item">
				<text class="info-label">用户名：</text>
				<text class="info-value">{{ userInfo.nickname }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">手机号：</text>
				<text class="info-value">{{ userInfo.mobile }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">邮箱：</text>
				<text class="info-value">{{ userInfo.email }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">性别：</text>
				<text class="info-value">{{ userInfo.sex }}</text>
			</view>
		</view>

		<!-- 功能列表区域 -->
		<view class="function-container">
			<!-- 我的预约 -->
			<view class="function-item" @click="goToAppointments">
				<uv-icon name="list" color="#2979ff" size="28"></uv-icon>
				<text class="function-name">我的预约</text>
			</view>
			<!-- 修改个人信息 -->
			<view class="function-item" @click="showEditModal">
				<uv-icon name="edit-pen" color="#2979ff" size="28"></uv-icon>
				<text class="function-name">修改个人信息</text>
			</view>
			<!-- 修改密码 -->
			<view class="function-item" @click="goToChangePassword">
				<uv-icon name="edit-pen" color="#2979ff" size="28"></uv-icon>
				<text class="function-name">修改密码</text>
			</view>
			<!-- 退出登录 -->
			<view class="function-item" @click="logout">
				<uv-icon name="close" color="#2979ff" size="28"></uv-icon>
				<text class="function-name">退出登录</text>
			</view>
		</view>

		<!-- 修改个人信息模态框 -->
		<view class="modal" v-if="showEditModalFlag">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">修改个人信息</text>
					<uv-icon name="close" size="24" color="#999" @click="closeEditModal"></uv-icon>
				</view>
				<view class="modal-body">
					<view class="form-item">
						<text class="form-label">用户名：</text>
						<input class="form-input" v-model="editForm.nickname" placeholder="请输入用户名" />
					</view>
					<view class="form-item">
						<text class="form-label">手机号：</text>
						<input class="form-input" v-model="editForm.mobile" placeholder="请输入手机号" />
					</view>
					<view class="form-item">
						<text class="form-label">邮箱：</text>
						<input class="form-input" v-model="editForm.email" placeholder="请输入邮箱" />
					</view>
					<view class="form-item">
						<text class="form-label">性别：</text>
						<picker class="form-input" :range="sexOptions" @change="handleSexChange"
							:value="editForm.sexIndex">
							<view class="picker-placeholder">{{ editForm.sex || '请选择性别' }}</view>
						</picker>
					</view>

				</view>
				<view class="modal-footer">
					<uv-button class="cancel-btn" type="default" size="mini" @click="closeEditModal">取消</uv-button>
					<uv-button class="confirm-btn" type="primary" size="mini" @click="submitEdit">确认</uv-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted
	} from 'vue';
	
	// 用户信息数据
	const userInfo = reactive({
		avatar: '/static/userphoto/default.jpg', // 默认头像路径
		nickname: '',
		mobile: '',
		email: '',
		sex: ''
	});

	// 编辑表单数据
	const editForm = reactive({
		nickname: '',
		mobile: '',
		email: '',
		sex: ''
	});

	// 是否显示修改个人信息模态框
	const showEditModalFlag = ref(false);

	

	// 复原用户信息函数
	const resetUserInfo = () => {
		userInfo.avatar = '/static/userphoto/default.jpg';
		userInfo.nickname = '';
		userInfo.mobile = '';
		userInfo.email = '';
		userInfo.sex = '';
	};
	// 性别选项
	const sexOptions = ['男', '女'];//男：1，女：2
	// 性别选择变更事件
	const handleSexChange = (e) => {
	  editForm.sexIndex = e.detail.value;
	  editForm.sex = sexOptions[e.detail.value];
	};

	// 显示修改个人信息模态框
	const showEditModal = () => {
		// 将当前用户信息复制到编辑表单
		editForm.nickname = userInfo.nickname;
		editForm.mobile = userInfo.mobile;
		editForm.email = userInfo.email;
		editForm.sex = userInfo.sex;
		showEditModalFlag.value = true;
	};

	// 关闭修改个人信息模态框
	const closeEditModal = () => {
		showEditModalFlag.value = false;
	};

	// 提交修改个人信息
	const submitEdit = () => {
		// 校验手机号格式
		if (editForm.mobile && !/^1[3-9]\d{9}$/.test(editForm.mobile)) {
			uni.showToast({
				title: '手机号格式不正确',
				icon: 'none'
			});
			return;
		}

		// 校验邮箱格式
		if (editForm.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(editForm.email)) {
			uni.showToast({
				title: '邮箱格式不正确',
				icon: 'none'
			});
			return;
		}

		// 调用修改个人信息接口
		uni.request({
			url: 'http://localhost:58080/admin-api/system/user/profile/update-app', // 修改个人信息接口地址
			method: 'PUT',
			data: {
				nickname: editForm.nickname,
				mobile: editForm.mobile,
				email: editForm.email,
				sex: editForm.sex === '男' ? 1 : 2
			},
			header: {
				'Content-Type': 'application/json',
				// 如果需要携带 token，可以从本地存储中获取并设置到请求头中
				'Authorization': `Bearer ${uni.getStorageSync('userInfo').accessToken}`
			},
			success: (res) => {
				if (res.data.data === true) {
					// 修改成功
					uni.showToast({
						title: '修改成功',
						icon: 'success'
					});
					// 更新用户信息
					getUserProfile();
					// 关闭模态框
					closeEditModal();
				} else {
					// 修改失败
					uni.showToast({
						title: res.data.msg || '修改失败',
						icon: 'none'
					});
				}
			},
			fail: (err) => {
				// 请求失败
				uni.showToast({
					title: '网络请求失败',
					icon: 'none'
				});
				console.error(err);
			}
		});
	};

	// 跳转到我的预约页面
	const goToAppointments = () => {
		uni.navigateTo({
			url: '/pages/myappoint/myappoint'
		});
	};

	// 跳转到修改密码页面
	const goToChangePassword = () => {
		uni.navigateTo({
			url: '/pages/changepassword/changepassword'
		});
	};

	// 退出登录
	const logout = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					// 调用登出接口
					uni.request({
						url: 'http://localhost:58080/admin-api/system/auth/logout', // 登出接口地址
						method: 'POST',
						header: {
							'Content-Type': 'application/json',
							// 如果需要携带 token，可以从本地存储中获取并设置到请求头中
							'Authorization': `Bearer ${uni.getStorageSync('userInfo').accessToken}`
						},
						success: (res) => {
							if (res.statusCode === 200) {
								// 登出成功
								uni.showToast({
									title: '退出登录成功',
									icon: 'success'
								});
								// 清除本地存储的用户信息
								uni.removeStorageSync('userInfo');
								// 调用复原用户信息函数
								resetUserInfo();
								// 跳转到登录页面
								uni.navigateTo({
									url: '/pages/login/login'
								});
							} else {
								// 登出失败
								uni.showToast({
									title: res.data.msg || '退出登录失败',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							// 请求失败
							uni.showToast({
								title: '网络请求失败',
								icon: 'none'
							});
							console.error(err);
						}
					});
				}
			}
		});
	};

	// 页面加载时初始化用户信息
	onMounted(() => {
		getUserProfile();
	});

	// 获取用户信息
	const getUserProfile = () => {
		uni.request({
			url: 'http://localhost:58080/admin-api/system/user/profile/get', // 获取用户信息接口地址
			method: 'GET',
			header: {
				'Content-Type': 'application/json',
				// 如果需要携带 token，可以从本地存储中获取并设置到请求头中
				'Authorization': `Bearer ${uni.getStorageSync('userInfo').accessToken}`
			},
			success: (res) => {
				if (res.statusCode === 200) {
					// 更新用户信息
					const profileData = res.data.data;
					userInfo.avatar = profileData.avatar || userInfo.avatar;
					userInfo.nickname = profileData.nickname || userInfo.nickname;
					userInfo.mobile = profileData.mobile || userInfo.mobile;
					userInfo.email = profileData.email || userInfo.email;
					userInfo.sex = profileData.sex === 1 ? '男' : '女';
				} else {
					// 获取用户信息失败
					uni.showToast({
						title: res.data.msg || '获取用户信息失败',
						icon: 'none'
					});
				}
			},
			fail: (err) => {
				// 请求失败
				uni.showToast({
					title: '网络请求失败',
					icon: 'none'
				});
				console.error(err);
			}
		});
	};
</script>

<style scoped>
	.personal-center {
		width: 100%;
		padding: 20px;
		background-color: #f5f5f5;
	}

	/* 头像样式 */
	.avatar-container {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
		margin-left: -10px;
	}

	.avatar {
		width: 120px;
		height: 120px;
		border-radius: 50%;
		border: 2px solid #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	/* 个人信息样式 */
	.info-container {
		background-color: #fff;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 20px;
		margin-right: 40px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	}

	.info-item {
		display: flex;
		padding: 10px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.info-label {
		font-weight: bold;
		color: #666;
		width: 80px;
	}

	.info-value {
		flex: 1;
		color: #333;
	}

	/* 功能列表样式 */
	.function-container {
		background-color: #fff;
		border-radius: 10px;
		padding: 15px;
		margin-right: 40px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	}

	.function-item {
		display: flex;
		align-items: center;
		padding: 15px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.function-icon {
		font-size: 24px;
		color: #ff9900;
		margin-right: 10px;
	}

	.function-name {
		font-size: 16px;
		color: #333;
	}

	/* 修改个人信息模态框样式 */
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.modal-content {
		background-color: #fff;
		border-radius: 10px;
		width: 80%;
		max-width: 500px;
		overflow: hidden;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 20px;
		border-bottom: 1px solid #f0f0f0;
	}

	.modal-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.modal-body {
		width: 80%;
		background-color: #fff;
		padding: 30px;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.form-item {
		margin-bottom: 20px;
	}

	.form-label {
		display: block;
		margin-bottom: 8px;
		font-size: 16px;
		color: #333;
	}

	.form-input {
		width: 100%;
		height: 40px;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 0 10px;
		font-size: 14px;
	}

	.modal-footer {
		display: flex;
		justify-content: flex-end;
		padding: 15px 20px;
		border-top: 1px solid #f0f0f0;
	}

	.cancel-btn {
		margin-right: 10px;
	}
</style>